<%--
  Created by IntelliJ IDEA.
  User: 杨娇
  Date: 2025/7/3
  Time: 16:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绿能充 - 公告详情</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    :root {
      --primary-color: #00a896;
      --secondary-color: #02c39a;
      --dark-color: #05668d;
      --light-color: #f0f3bd;
      --accent-color: #028090;
      --text-dark: #333;
      --text-light: #f8f9fa;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Noto Sans SC', sans-serif;
      color: var(--text-dark);
      background-color: #f9f9f9;
      min-height: 100vh;
      display: flex;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 250px;
      background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-color) 100%);
      color: white;
      padding: 20px 0;
      height: 100vh;
      position: fixed;
      box-shadow: var(--shadow);
      z-index: 100;
    }

    .sidebar-header {
      padding: 0 20px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 20px;
    }

    .sidebar-header .logo {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .sidebar-header .logo-icon {
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 18px;
      color: var(--light-color);
    }

    .sidebar-header h3 {
      font-size: 1.2rem;
      font-weight: 500;
      margin: 0;
    }

    .sidebar-header p {
      font-size: 0.8rem;
      opacity: 0.8;
      margin: 0;
    }

    .nav-menu {
      list-style: none;
      padding: 0 15px;
    }

    .nav-item {
      margin-bottom: 5px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      border-radius: 8px;
      transition: var(--transition);
    }

    .nav-link:hover, .nav-link.active {
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
    }

    .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
      font-size: 16px;
    }

    .nav-link .badge {
      margin-left: auto;
      background-color: var(--light-color);
      color: var(--dark-color);
      font-size: 0.7rem;
      padding: 3px 6px;
    }

    .user-profile {
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      padding: 0 20px;
    }

    .user-info {
      display: flex;
      align-items: center;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
    }

    .user-info:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 14px;
    }

    .user-name {
      font-size: 0.9rem;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .user-role {
      font-size: 0.7rem;
      opacity: 0.8;
    }

    /* 主内容区 */
    .main-content {
      flex: 1;
      margin-left: 250px;
      padding: 30px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .page-title h1 {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 5px;
    }

    .page-title p {
      color: #777;
      font-size: 0.9rem;
      margin: 0;
    }

    .header-actions {
      display: flex;
      gap: 10px;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
    }

    .btn i {
      margin-right: 6px;
    }

    .btn-primary {
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
      color: white;
      box-shadow: 0 4px 15px rgba(0, 168, 150, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 168, 150, 0.4);
    }

    .btn-outline {
      background: transparent;
      border: 1px solid #ddd;
      color: #555;
    }

    .btn-outline:hover {
      background-color: #f5f5f5;
    }

    .btn-danger {
      background: linear-gradient(to right, #f44336, #ff9800);
      color: white;
      box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
    }

    .btn-danger:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(244, 67, 54, 0.4);
    }

    /* 公告详情卡片 */
    .announcement-card {
      background-color: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 30px;
      margin-bottom: 30px;
    }

    .announcement-header {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
    }

    .announcement-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--dark-color);
      margin-bottom: 10px;
    }

    .announcement-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      color: #777;
      font-size: 0.9rem;
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .meta-item i {
      color: var(--primary-color);
    }

    .badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .badge-success {
      background-color: #e8f5e9;
      color: #4caf50;
    }

    .badge-warning {
      background-color: #fff8e1;
      color: #ff9800;
    }

    .badge-danger {
      background-color: #ffebee;
      color: #f44336;
    }

    .badge-primary {
      background-color: #e0f2f1;
      color: var(--primary-color);
    }

    .announcement-content {
      line-height: 1.8;
      margin-bottom: 30px;
      white-space: pre-line;
    }

    /* 附件区域 */
    .attachments-section {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #eee;
    }

    .attachments-title {
      font-size: 1.1rem;
      font-weight: 500;
      margin-bottom: 15px;
      color: var(--dark-color);
    }

    .attachment-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .attachment-item {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      background-color: #f9f9f9;
      border-radius: 8px;
      transition: var(--transition);
    }

    .attachment-item:hover {
      background-color: #f0f0f0;
    }

    .attachment-icon {
      width: 40px;
      height: 40px;
      background-color: #e0f2f1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      color: var(--primary-color);
    }

    .attachment-info {
      flex: 1;
    }

    .attachment-name {
      font-weight: 500;
      margin-bottom: 3px;
    }

    .attachment-size {
      font-size: 0.8rem;
      color: #777;
    }

    .attachment-actions {
      display: flex;
      gap: 10px;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
        overflow: hidden;
      }

      .sidebar-header h3,
      .sidebar-header p,
      .nav-link span,
      .user-name,
      .user-role {
        display: none;
      }

      .sidebar-header {
        padding: 15px 10px;
      }

      .nav-link {
        justify-content: center;
        padding: 12px 0;
      }

      .nav-link i {
        margin-right: 0;
        font-size: 18px;
      }

      .main-content {
        margin-left: 70px;
      }
    }

    @media (max-width: 768px) {
      .announcement-meta {
        flex-direction: column;
        gap: 10px;
      }

      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
    }

    @media (max-width: 576px) {
      .main-content {
        padding: 20px 15px;
      }

      .announcement-card {
        padding: 20px;
      }

      .attachment-item {
        flex-direction: column;
        align-items: flex-start;
      }

      .attachment-icon {
        margin-right: 0;
        margin-bottom: 10px;
      }

      .attachment-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 10px;
      }
    }
  </style>
</head>
<body>
<!-- 侧边导航栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-charging-station"></i>
      </div>
      <div>
        <h3>绿能充</h3>
        <p>管理员面板</p>
      </div>
    </div>
  </div>

  <ul class="nav-menu">
    <li class="nav-item">
      <a href="/admin/dashboard" class="nav-link">
        <i class="fas fa-tachometer-alt"></i>
        <span>仪表盘</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/admin/user/list" class="nav-link">
        <i class="fas fa-users"></i>
        <span>用户管理</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/admin/pile/list" class="nav-link">
        <i class="fas fa-charging-station"></i>
        <span>充电桩管理</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/admin/announcement/list" class="nav-link active">
        <i class="fas fa-bullhorn"></i>
        <span>公告管理</span>
        <span class="badge">${newAnnouncementCount}</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/admin/report/list" class="nav-link">
        <i class="fas fa-list-alt"></i>
        <span>充电记录</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/admin/fault/list" class="nav-link">
        <i class="fas fa-exclamation-triangle"></i>
        <span>故障报告</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="/admin/settings" class="nav-link">
        <i class="fas fa-cog"></i>
        <span>系统设置</span>
      </a>
    </li>
  </ul>

  <div class="user-profile">
    <div class="user-info">
      <div class="user-avatar">
        <i class="fas fa-user"></i>
      </div>
      <div>
        <div class="user-name">管理员</div>
        <div class="user-role">超级管理员</div>
      </div>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <div class="header">
    <div class="page-title">
      <h1>公告详情</h1>
      <p>查看公告详细信息</p>
    </div>
    <div class="header-actions">
      <a href="${pageContext.request.contextPath}/admin/announcement/list" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> 返回列表
      </a>
    </div>
  </div>

  <!-- 公告详情卡片 -->
  <div class="announcement-card">
    <div class="announcement-header">
      <h1 class="announcement-title">${announcement.title}</h1>
      <div class="announcement-meta">
        <div class="meta-item">
          <i class="fas fa-tag"></i>
          <span>类型:
                        <c:choose>
                          <c:when test="${announcement.type == 'SYSTEM'}">系统公告</c:when>
                          <c:when test="${announcement.type == 'MAINTENANCE'}">维护公告</c:when>
                          <c:when test="${announcement.type == 'PROMOTION'}">促销公告</c:when>
                          <c:when test="${announcement.type == 'OTHER'}">其他</c:when>
                          <c:otherwise>${announcement.type}</c:otherwise>
                        </c:choose>
                    </span>
        </div>
        <div class="meta-item">
          <i class="fas fa-user"></i>
          <span>发布人: 管理员</span>
        </div>
        <div class="meta-item">
          <i class="fas fa-calendar-alt"></i>
          <span>发布时间: <fmt:formatDate value="${announcement.createTime}" pattern="yyyy-MM-dd HH:mm"/></span>
        </div>
        <div class="meta-item">
          <i class="fas fa-clock"></i>
          <span>状态:
                        <c:choose>
                          <c:when test="${announcement.status == 'PUBLISHED'}">
                            <span class="badge badge-success">已发布</span>
                          </c:when>
                          <c:when test="${announcement.status == 'DRAFT'}">
                            <span class="badge badge-warning">草稿</span>
                          </c:when>
                          <c:when test="${announcement.status == 'ARCHIVED'}">
                            <span class="badge badge-danger">已归档</span>
                          </c:when>
                        </c:choose>
                    </span>
        </div>
        <div class="meta-item">
          <i class="fas fa-calendar-check"></i>
          <span>生效时间: <fmt:formatDate value="${announcement.startTime}" pattern="yyyy-MM-dd HH:mm"/></span>
        </div>
        <div class="meta-item">
          <i class="fas fa-calendar-times"></i>
          <span>结束时间: <fmt:formatDate value="${announcement.endTime}" pattern="yyyy-MM-dd HH:mm"/></span>
        </div>
      </div>
    </div>

    <div class="announcement-content">
      ${announcement.content}
    </div>

    <!-- 附件区域 -->
    <c:if test="${not empty attachments}">
      <div class="attachments-section">
        <h3 class="attachments-title">
          <i class="fas fa-paperclip"></i> 附件
        </h3>
        <div class="attachment-list">
          <c:forEach items="${attachments}" var="attachment">
            <div class="attachment-item">
              <div class="attachment-icon">
                <i class="fas fa-file"></i>
              </div>
              <div class="attachment-info">
                <div class="attachment-name">${attachment.name}</div>
                <div class="attachment-size">-</div>
              </div>
              <div class="attachment-actions">
                <a href="${attachment.url}" class="btn btn-outline btn-sm" download>
                  <i class="fas fa-download"></i> 下载
                </a>
                <a href="${attachment.url}" class="btn btn-outline btn-sm" target="_blank">
                  <i class="fas fa-eye"></i> 预览
                </a>
              </div>
            </div>
          </c:forEach>
        </div>
      </div>
    </c:if>
  </div>

  <!-- 操作按钮 -->
  <div class="header-actions">
    <button class="btn btn-danger" >
      <a href="${pageContext.request.contextPath}admin/announcement/delete/{id}" class="btn btn-outline">
        <i class="fas fa-trash-alt"></i> 删除公告
      </a>
    </button>
    <a href="${pageContext.request.contextPath}/admin/announcement/list" class="btn btn-outline">
      <i class="fas fa-list"></i> 返回列表
    </a>
  </div>
</div>

<!-- 删除确认模态框 -->
<div id="deleteModal" class="modal" style="display: none;">
  <div class="modal-content" style="max-width: 500px;">
    <div class="modal-header">
      <h3>确认删除</h3>
      <button class="modal-close" onclick="closeModal()">&times;</button>
    </div>
    <div class="modal-body">
      <p>确定要删除公告 "${announcement.title}" 吗？此操作不可撤销。</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" onclick="closeModal()">取消</button>
      <a href="${pageContext.request.contextPath}/admin/announcement/delete/${announcement.id}" class="btn btn-danger">确认删除</a>
    </div>
  </div>
</div>

<script>
  // 确认删除
  function confirmDelete(id) {
    document.getElementById('deleteModal').style.display = 'flex';
  }

  // 关闭模态框
  function closeModal() {
    document.getElementById('deleteModal').style.display = 'none';
  }

  // 点击模态框外部关闭模态框
  window.onclick = function(event) {
    if (event.target.className === 'modal') {
      closeModal();
    }
  }
</script>
</body>
</html>
